<template>
	<view>
		<remind-carinfo :dataBean="dataBean"></remind-carinfo>

		<view class="item" v-if="dataBean.carTransferVO.length>0">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="过户资料" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<!-- <text style="line-height: 80rpx; color: #E93131;">{{dataBean.carOutInsurance.repairStatusShow|filterNull}}</text> -->
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '10rpx','display': 'block',}"></u-line>
			
			<view v-for="(item, index) in dataBean.carTransferVO" :key="index">
				
				<view class="text-line" style="margin-top: 20rpx;">
					<text class="text-name">备注:</text>
					<text class="text-value">{{item.remarks|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">过户资料:</text>
					<text class="text-value" v-if="item.accessory.length<=0">--</text>
				</view>
				
				<view style="margin: 0 20rpx 20rpx 20rpx;" v-if="item.accessory.length>0">
					<u-album :urls="item.accessory"></u-album>
				</view>
				
				<view class="text-line">
					<text class="text-name">预计过户时间:</text>
					<text class="text-value">{{item.estimatedTransferTime|filterNull}}</text>
				</view>
				
				<view class="text-line">
					<text class="text-name">实际过户时间:</text>
					<text class="text-value">{{item.transferTime|filterNull}}</text>
				</view>
			
				<u-line color="#efefef" :customStyle="{'display': 'block',}"></u-line>
				
			</view>
			
		</view>

	</view>
</template>

<script>
	import remindCarinfo from '@/components/remind-carinfo.vue';

	export default {
		components: {
			remindCarinfo,
		},

		data() {
			return {
				dataBean: {
					vehicle: {

					},
					carTransferVO:[]
				},
				carId: '',
				pageType: '',
			}
		},
		methods: {
			
		},

		onLoad(op) {
			this.carId = op.carId;
			this.pageType = op.pageType;

		},
		onShow() {
			let that = this;
			
			this.$u.api.getdCartransferDetailst({
				carId: this.carId,
			}).then(
				res => {
					this.dataBean = res;
					
					//造假数据
					// this.dataBean.carTransferVO=[
					// 	{
					// 		transferId : '2',
					// 		estimatedTransferTime : '2020-08-03',
					// 		transferTime : '2020-08-05',
					// 		createTime : '2020-08-08',
					// 		remarks : '测试过户',
					// 		operator : 'lztest',
					// 		accessory : ["ERBA/idCard_images/3c/9b/b0ac4a9bff3546beb65e3d7413123c9b.jpg","ERBA/license_images/62/fd/cc96cafd29d74aeb920240c1bf9062fd.jpg"]
					// 	},
					// 	{
					// 		transferId : '2',
					// 		estimatedTransferTime : '2020-08-03',
					// 		transferTime : '2020-08-05',
					// 		createTime : '2020-08-08',
					// 		remarks : '测试过户',
					// 		operator : 'lztest',
					// 		accessory : []
					// 	},
					// 	{
					// 		transferId : '2',
					// 		estimatedTransferTime : '2020-08-03',
					// 		transferTime : '2020-08-05',
					// 		createTime : '2020-08-08',
					// 		remarks : '测试过户',
					// 		operator : 'lztest',
					// 		accessory : ["ERBA/idCard_images/3c/9b/b0ac4a9bff3546beb65e3d7413123c9b.jpg","ERBA/license_images/62/fd/cc96cafd29d74aeb920240c1bf9062fd.jpg"]
					// 	},
					// ]
					
					this.dataBean.carTransferVO = this.dataBean.carTransferVO.map(item=>{
						item.accessory = item.accessory.map(sitem=>{
							return that.baseImgUrl()+sitem
						})
						
						return item
					})
				}

			);
		},
	}
</script>

<style lang="scss" scoped>
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}

	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 200rpx;
			height: 100rpx;
		}

		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}

	// .button-container {
	// 	display: flex;
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100rpx;
	// 	bottom: 0;
	// 	z-index: 999;
	// 	background-color: white;
	// 	padding: 0 20rpx 0 0;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;

	// 	button {
	// 		flex: 1;
	// 		margin-left: 20rpx;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		border-radius: 40rpx;
	// 		color: $xz-bgColor-write;
	// 		background-color: $xz-bgColor-blue;
	// 		font-size: 32rpx;
	// 	}

	// }
</style>
